<!--
 * @Description: 历史数据
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:20:05
-->
<template>
  <div>

    <!-- 树形控件 -->
    <el-col :span="6">
      <div class="empData" style="
              padding-right: 10px;
              border-right: 1px solid #ccc;
              height: calc(100vh - 60px);
            ">

        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>

        <el-tree @node-click="handlerClick" class="filter-tree" :data="data" :props="defaultProps"
          :filter-node-method="filterNode" ref="tree">
        </el-tree>

      </div>
    </el-col>

    <!-- 右边内容 -->
    <el-col :span="18">
      <div v-if="params.device_id" class="table" style="margin-left: 10px">

        <el-button type="primary" @click="togo" icon="el-icon-loading">我要报修</el-button>

        <div style="margin: 20px 0;"></div>

        <div class="table1">
          <el-descriptions title="工程信息">
            <el-descriptions-item label="工程编号">{{engineer.serial_number}}</el-descriptions-item>
            <el-descriptions-item label="工程名称">{{engineer.name}}</el-descriptions-item>
            <el-descriptions-item label="工程类型">{{engineer.type}}</el-descriptions-item>
            <el-descriptions-item label="工程状态">
              <el-tag size="small">{{engineer.status}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="联系地址">{{engineer.address}}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div style="margin: 20px 0;"></div>
        <hr>

        <div class="table2">
          <el-descriptions title="设备信息">
            <el-descriptions-item label="工程设备">{{empData.serial_number}}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{empData.name}}</el-descriptions-item>
            <el-descriptions-item label="绑定状态">
              <el-tag size="small">{{empData.bind_status}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="在线状态">
              <el-tag size="small">{{empData.online_status}}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="content1">
          <el-table :data="tempData" style="width: 100%">
            <el-table-column prop="insert_time" label="日期" width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.insert_time | fmtDate }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="tsp" label="tsp" width="180">
            </el-table-column>
            <el-table-column prop="pm10" label="pm10"> </el-table-column>
            <el-table-column prop="pm25" label="pm25"> </el-table-column>
            <el-table-column prop="temperature" label="温度">
            </el-table-column>
            <el-table-column prop="humidity" label="湿度"> </el-table-column>
            <el-table-column prop="wind_direction" label="风向">
            </el-table-column>
            <el-table-column prop="wind_speed" label="风速">
            </el-table-column>
          </el-table>
        </div>

        <div class="page" style="margin-top:15px; text-align:right">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="params.page" :page-sizes="[2, 5, 10, 20]" :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total"
            hide-on-single-page></el-pagination>
        </div>

      </div>

      <!-- 当用户没有点击设备时 -->
      <div v-else style="color: red; text-align: center">
        <el-empty :image-size="300" description="请选择设备查看"></el-empty>
      </div>
    </el-col>

  </div>
</template>

  <script>
import { get } from '@/utils/request'

export default {
    data() {
        return {
            total: 0,
            tempData: [],
            engineer: [],
            ID: {
                id: '',
            },
            // 设备采集的数据
            empData: [],
            // 过滤文本
            filterText: '',
            // 树形结构数据源
            data: [],
            // 树形结构配置项
            defaultProps: {
                children: 'children',
                label: 'name',
            },

            params: {
                page: 1,
                pageSize: 5,
                engineer_id: '',
                device_id: '',
            },
        }
    },

    watch: {
        // 监听文本进行过滤
        filterText(val) {
            this.$refs.tree.filter(val)
        },
    },

    computed: {},

    methods: {

        // 获取工程设备采集的数据--右侧数据
        async getempData() {
            // params page pageSize device_id e_id
            // 判断时间日期是否被选择
            // if (this.params.timer) {
            //     this.params.begin_time = this.params.timer[0]
            //     this.params.end_time = this.params.timer[1]
            //     delete this.params.timer
            // }
            let res = await get('/monitor/pageQuery', this.params)
            this.tempData = res.data.list
            this.total = res.data.total
        },

        //数据条数发送变化的函数
        handleSizeChange(pageSize) {
            //console.log(pageSiZe,'条数');
            //当条数发生改变，重新请求工程数据
            //params.pageSize ==》 2
            this.params.pageSize = pageSize
            //重新请求工程数据
            this.getEngData()
        },
        //页码发送改变的函数
        handleCurrentChange(page) {
            //console.log(page,'页码');
            this.params.page = page
            this.getEngData()
        },

        togo() {
            //路由跳转 并传参
            this.$router.push({
                path: '/am/order/Repairs',
            })
        },

        toSearch() {
            this.getEmpData()
        },

        // 点击树形节点
        handlerClick(data) {
            //console.log(data);
            // data 点击工程 data---工程数据 children
            // data 点击设备 data---设备数据 没有children
            //判断点击的是设备
            if (!data.children) {
                this.params.engineer_id = data.engineer_id
                this.params.device_id = data.id
                this.ID.id = data.id
                this.getEmpData()
                this.getempData()
            }
            if (data.children) {
                this.params.engineer_id = null
                this.params.device_id = null
            }
        },

        //获取工程设备采集的数据--右侧数据
        async getEmpData() {
            let res = await get('/device/findDeviceDetail', this.ID)

            //console.log(res,'00000');

            this.empData = res.data
            this.engineer = res.data.engineer
        },

        // 获取工程设备 --左侧用到数据
        async loadEmpData() {
            let res = await get('/engineer/findEngineerDeviceTree')
            //console.log(res,'0000')
            this.data = res.data
        },

        // 过滤节点的方法
        filterNode(value, data) {
            if (!value) return true
            // return data.label.indexOf(value) !== -1;
            return data.name.indexOf(value) !== -1
        },
    },

    created() {
        this.loadEmpData()
        // this.getEmpData()
    },

    mounted() {},
}
</script>

<style>
.content1 {
  height: 300px;
}
</style>